<style scoped>
body {
  background-color: rgba(18, 33, 43);
  overflow: hidden;
  margin: 0%;
  padding: 0%;
  height: 100%;
  font-family: "微软雅黑";
}
#header {
  height: 21%;
  display: flex;
  justify-content: space-between;
}
/* 内容栏样式 */
#content {
  transition: all 0.3s ease; /* 过渡效果 */
  background-color: rgba(18, 33, 43);
  height: 79%; /* 内容区域高度为页面的70% */
  display: flex; /* 启用Flexbox布局 */
  justify-content: space-between; /* 子元素之间的间隔均匀分布 */
  justify-content: center; /* 水平居中 */
  transform: all 0.3 ease;
}
.LeftTitle {
  position: relative;
  left: -10%;
}
.content-left-HomePage {
  background-color: rgba(18, 33, 43);
  width: 35%; /* 内容栏宽度为页面宽度的20% */
  color: rgb(163, 236, 240);
}
/* 选择所有的无序列表 */
.content-left-HomePage ul {
  list-style-type: none; /* 移除默认的列表项标记 */
}
.content-left-HomePage h {
  font-size: 2.1em;
  font-weight: bolder;
  position: relative;
  left: 18%;
  cursor: pointer;
}
.content-left-HomePage p {
  font-size: 1.5em;
}
.content-left-HomePage li {
  font-size: 1.3em;
  margin-bottom: 0.15em;
}

.content-left-ContentPage {
  background-color: rgba(18, 33, 43);
  width: 35%; /* 内容栏宽度为页面宽度的20% */
  color: rgb(163, 236, 240);
}
.content-left-ContentPage p {
  /* display: none; */
  font-size: 1.5em;
  margin-top: 0.08em;
  margin-bottom: 0.08em;
  transition: all 0.3s ease; /* 过渡效果 */
}
.content-left-ContentPage h {
  font-size: 2.1em;
  font-weight: bolder;
  position: relative;
  left: 18%;
}
.content-left-ContentPage h1 {
  font-size: 1.5em;
  font-weight: bolder;
  position: relative;
  left: 21%;
  margin-top: 0.8em;
  cursor: pointer;
}
.introduction-box {
  overflow: hidden;
  position: relative;
  left: 24%;
  width: 75%;
  transition: all 0.5s ease; /* 过渡效果 */
}
.introduction-box-hidden {
  height: 0em;
}

.policy-box {
  height: 10000%;
  overflow: hidden;
  margin-top: 1em;
  position: relative;
  left: 24%;
  transition: all 0.5s ease; /* 过渡效果 */
}

.Parcel-box {
  height: 16em;
  overflow: hidden;
  margin-top: 1em;
  position: relative;
  left: 24%;
  transition: all 0.5s ease; /* 过渡效果 */
}
.Parcel-box-hidden{
  height: 0em;
  visibility: hidden;
    margin-top: 1em;
  position: relative;
  left: 24%;
  transition: all 0.5s ease; /* 过渡效果 */
  overflow: hidden;
}

.Parcel-box table {
    position: relative;
    left: -10%;
    width: 75%; 
    border-collapse: collapse;
    margin: auto; 
}

.Parcel-box tr td {
    width: 50%; 
}

.Parcel-box th, td {
    border: 1px solid rgb(163,236,240); 
    padding: 2px; 
    background-color: rgb(18,33,43); 
    text-align: center;
    vertical-align: middle; 
}
.Parcel-box thead th {

    background-color: rgb(163,236,240); 
    color: black;
}
.blockImg{
    margin-top: 1em;
    position: absolute;
    left: 25%;

    transition: all 0.5s ease; /* 过渡效果 */
    z-index: 9999;
    width: 120em;
    height: 66em;
    top: -11.5em;
}

.blockImg-hidden{
  margin-top: -1em;
  height: 0em;
  visibility: hidden;
  z-index: -1;
}

.policy-box #policy {
  display: flex;
  margin-top: 5%;
  width: 80%;
}
#policy-ico {
  display: inline-block; /* 将span转换为内联块级元素 */
  width: 0.4em;
  height: 10%;
  background-color: rgb(188, 244, 186);
  color: rgb(188, 244, 186);
  margin-right: 1%;
  border-radius: 10px;
}
#policy-content {
  /* white-space: nowrap; */
  text-decoration: none;
}
#policy-content a {
  font-size: 1em;
  cursor: pointer;
  color: rgb(163, 236, 240);
}
/* 为每个列表项添加自定义的白色正方形标记 */
ul li::before {
  content: "■"; /* 这是HTML实体表示一个正方形 */
  color: rgb(163, 236, 240); /* 设置正方形的颜色为白色 */

  width: 1em; /* 设置宽度 */
  height: 1em; /* 设置高度 */
  line-height: 1; /* 行高，确保文本垂直居中 */
  margin-right: 0.5em; /* 在标记和文本之间添加一些右边距 */
}
/* 地图区域样式 */
#map {
  background-color: rgba(243, 237, 237, 0.918);
  transition: all 0.3s ease; /* 过渡效果 */
  overflow: hidden;
  position: relative;
  width: 65%;
}
#map2 {
  background-color: rgba(243, 237, 237, 0.918);
  transition: all 0.3s ease; /* 过渡效果 */
  overflow: hidden;
  position: relative;
  width: 65%;
}
#map3 {
  background-color: rgba(243, 237, 237, 0.918);
  transition: all 0.3s ease; /* 过渡效果 */
  overflow: hidden;
  position: relative;
  width: 65%;
}

#blockInformation {
  width: 30%;
  display: flex; /* 启用Flexbox布局 */
  flex-wrap: wrap; /* 允许项目换行 */
}
.iframe-container {
  z-index: 999;
  width: 60%;
  height: 0;
  overflow: hidden;
  transition: height 0.5s; /* 平滑过渡效果 */
}
.iframe-container.active {
  height: 80%; /* 根据需要调整高度 */
}
#title {
  width: 35%; /* 内容栏宽度为页面宽度的20% */
  display: flex; /* 启用Flexbox布局 */
  flex-direction: column; /* 使子元素垂直排列 */
  background-color: rgb(18, 33, 43);
}
#content-top {
  background-color: rgba(18, 33, 43);
  width: 65%; /* 内容栏宽度为页面宽度的20% */
  flex-direction: column; /* 使子元素垂直排列 */
}
#top1 {
  /* background-color: rgba(83, 160, 215, 0.5); */
  height: 58%;
  display: flex; /* 启用Flexbox布局 */
  justify-content: space-between; /* 子元素之间的间隔均匀分布 */
}
#map-select {
  background-color: rgba(18, 33, 43);
  width: 41%;
  display: flex; /* 启用Flexbox布局 */
  position: relative;
  left: 10.5%;
  top: 40%;
}
#map-select .select-item01 {
  color: rgb(183, 244, 175);
  font-size: 2.4em;
  font-weight: bold;
  cursor: pointer;
}
#map-select .line1 {
  background-color: rgb(183, 244, 175);
  width: 14.4em;
  height: 0.4em;
}
.select-item01-close {
  color: rgb(186, 198, 200);
  font-size: 2.4em;
  font-weight: bold;
  cursor: pointer;
}
.line1-close {
  background-color: rgb(186, 198, 200);
  width: 14.4em;
  height: 0.4em;
}
#select-item02 {
  position: relative;
  left: 15%;
}
#map-select .select-item02-close {
  color: rgb(186, 198, 200);
  font-size: 2.4em;
  font-weight: bold;
  cursor: pointer;
}
.select-item02 {
  color: rgb(183, 244, 175);
  font-size: 2.4em;
  font-weight: bold;
  cursor: pointer;
}
#map-select .line2-close {
  background-color: rgb(186, 198, 200);
  position: relative;
  width: 14.4em;
  height: 0.4em;
}
.line2 {
  background-color: rgb(183, 244, 175);
  width: 14.4em;
  height: 0.4em;
}
/* 搜索框样式 */
#search-box {
  background-color: rgba(18, 33, 43);
  width: 40%;
}
.search-input {
  padding: 0px 0px 0px 1em;
  font-size: 1.3em;
  color: white; /* 设置文本颜色为白色 */
  /* visibility: hidden; */
  position: relative;
  top: 40%;
  right: -67%;
  /* width: 19%; */
  width: 19%;
  height: 40%;
  border-radius: 0.8em;
  border: 0.08em solid gray;
  background-color: transparent; /* 设置背景色为透明 */
  transition: all 0.3s ease; /* 过渡效果 */
}
.searchBtn {
  position: relative;
  right: -79%;
  width: 8%;
  height: 30%;
  z-index: 999;
  background-image: url("../assets/images/查找图标.png");
  background-size: 100%;
}
/* 针对input文本框设置焦点时的样式 */
input:focus {
  border-color: white; /* 将边框颜色设置为白色 */
  outline: 0.05em solid white; /* 可选：保留轮廓，但改为白色 */
}
/* 下拉菜单样式 */
#select-box {
  background-color: rgba(18, 33, 43);
  height: 42%;
  display: flex; /* 启用Flexbox布局 */
  justify-content: space-between; /* 子元素之间的间隔均匀分布 */
}
.list {
  position: relative;
  width: 20%;
  height: 80%;
  top: 5%;
  left: 10.5%;
}
#list2 {
  position: relative;
  left: -6%;
}
#list3 {
  position: relative;
  left: -23%;
}
#list4 {
  position: relative;
  left: 34%;
}
.listBtn1 {
  display: inline-block; /* 将span转换为内联块级元素 */
  position: relative;
  width: 78%;
  height: 64%;
  background-color: rgb(130, 140, 142);
  cursor: pointer;
  display: flex; /* 启用Flexbox布局 */
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
  transition: all 0s ease; /* 过渡效果 */
}
.listBtn1 p {
  font-weight: bold;
  font-size: 1.8em;
}
.listBtn2 {
  display: inline-block; /* 将span转换为内联块级元素 */
  position: relative;
  width: 13%;
  height: 64%;
  left: 80%;
  top: -64%;
  background-color: rgb(130, 140, 142);
  background-image: url("../assets/images/下拉按钮.png");
  background-position: center center;
  cursor: pointer;
  transition: all 0 ease; /* 过渡效果 */
}
.listLine {
  background-color: rgb(130, 140, 142);
  position: relative;
  width: 78%;
  height: 8%;
  top: -60%;
  left: 0%;
}
/* 下拉内容的初始样式 */
.dropdown-content {
  height: 0%;
  overflow: hidden;
  visibility: hidden;
  position: relative;
  top: -50%;
  width: 93%;
  border-top: 0.08em solid rgb(18, 33, 43);
  transition: all 0.5s ease; /* 过渡效果 */
  z-index: 9999;
}
.dropdown-content a {
  position: relative;
  top: 1%;
}
#dropdown2 {
  display: flex; /* 启用Flexbox布局 */
  justify-content: space-between; /* 子元素之间的间隔均匀分布 */
  width: 187%;
  height: 1000%;
  visibility: hidden;
  position: relative;
  top: -10%;
  z-index: 9999;
}
.dropdown-content2 {
  height: 0%;
  overflow: hidden;
  visibility: hidden;
  position: relative;
  top: -4.5%;
  width: 49.9%;
  border-top: 0.08em solid rgb(18, 33, 43);
  transition: all 0.6s ease; /* 过渡效果 */
}
.dropdown-content2 a {
  position: relative;
  top: 0.1%;
}
.dropdown-content2 a:hover {
  color: white;
}
.dropdown-content2 a:hover .dropdown {
  /* background-color: rgba(186,198,200,0.8); */
  background-color: rgba(239, 242, 242, 0.8);
}
/* 鼠标悬停时下拉内容显示 */
.dropdown:hover .dropdown-content2 {
  height: 100%;
  visibility: visible;
}

/* 下拉项样式 */
.content-a {
  background-color: rgba(130, 140, 142, 0.8);
  font-size: 1.25em;
  color: black;
  font-weight: bold;
  transition: color 0.3s ease; /* 添加过渡效果，颜色变化持续0.3秒 */
  padding: 0.3em 0.4em;
  text-decoration: none;
  display: block;
  cursor: pointer;
  border-bottom: 0.08em solid rgb(18, 33, 43);
  border-left: 0.08em solid rgb(18, 33, 43);
  border-right: 0.08em solid rgb(18, 33, 43);
}
.dropdown-content a:hover {
  color: white;
}
.dropdown-content a:hover .dropdown {
  /* background-color: rgba(186,198,200,0.8); */
  background-color: rgba(239, 242, 242, 0.8);
}
/* 鼠标悬停时下拉内容显示 */
.dropdown:hover .dropdown-content {
  height: 1000%;
  visibility: visible;
}
.dropdown:hover .listBtn1 {
  background-color: rgb(186, 198, 200);
}
.dropdown:hover .listBtn2 {
  background-color: rgb(186, 198, 200);
}
.dropdown:hover .listLine {
  background-color: rgb(186, 198, 200);
}
/* 标题样式 */
#BigHeadline {
  height: 46%;
  display: flex; /* 启用Flexbox布局 */
  justify-content: space-between; /* 子元素之间的间隔均匀分布 */
}
#BigHeadline #Words-cn {
  width: 100%;
}
#Words-cn p {
  display: inline;
  color: rgb(183, 244, 175);
  font-size: 3.5em;
  font-weight: bold;
  margin: 0;
  padding: 0;
  position: relative;
  left: 10%;
  top: 29%;
}
#BigHeadline #Year {
  margin-left: 2%;
  color: rgb(183, 244, 175);
  font-size: 2em;
  font-weight: bold;
  margin: 0;
  padding: 0;
}
#Words-English {
  height: 15%;
}
#Words-English p {
  color: rgb(183, 244, 175);
  font-size: 1.5em;
  font-weight: bold;
  margin: 0;
  padding: 0;
  position: relative;
  left: 10%;
}
#backHome {
  height: 39%;
}
#backHome div {
  position: relative;
  left: 9%;
  top: 12%;
  width: 18%;
  height: 51%;
  background-image: url("../assets/images/返回首页.png");
  background-size: 100% 100%;
  cursor: pointer;
}
#backHome div p {
  color: rgb(183, 244, 175);
  font-size: 1.2em;
  margin: 0;
  padding: 0;
  position: relative;
  left: 30%;
  top: 20%;
}
.Information-box {
  margin: 0.5% 1.5% 0.5% 1.5%;
  display: flex;
  width: 30%;
  height: 11%;
  flex-direction: column; /* 使子元素垂直排列 */
  justify-content: space-between;
  opacity: 0;
  transition: opacity 0.5s ease;
  /* background-color: rgb(241, 83, 15); */
}
.Information-hidden {
  margin: 0.5% 1.5% 0.5% 1.5%;
  display: flex;
  width: 30%;
  height: 11%;
  flex-direction: column; /* 使子元素垂直排列 */
  justify-content: space-between;
  opacity: 1;
  transition: opacity 0.5s ease;
  /* background-color: rgb(241, 83, 15); */
}
#blockName {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: rgba(127, 222, 222, 0.8);
  border-radius: 5px;
  font-size: 0.8em;
  color: aliceblue;
  font-weight: bolder;
  position: relative;
  white-space: nowrap; /* 不换行 */
  text-overflow: ellipsis; /* 显示省略符号 */
  flex-basis: 20%;
  margin-bottom: 2%;
}
#blockName p {
  margin: 1%;
}
#Information {
  display: flex;
  padding: 5px;
  align-items: center;
  background-color: rgba(127, 222, 222, 0.5);
  border-radius: 5px;
  font-size: 0.75em;
  color: aliceblue;
  position: relative;
  text-overflow: ellipsis; /* 显示省略符号 */
  flex-basis: 80%;
}
#Information p {
  margin: 1%;
}
.iframe-close-btn{
  font-size: 1.2em;
  position: absolute;
  top: 8.6%;
  right: 8%;
  z-index: 99999;
  width: 4%;
  height: 4%;
  background-color: rgba(127, 222, 222, 0.5);
  border-radius: 5px;
  border: 1px solid rgb(255,255,255,0.5); 
  transition: all 0.3s ease; 
}
.iframe-close-btn-hidden{
  z-index: -1;
}

</style>
<template>
  <body>
    <!-- 头部导航栏 -->
    <div id="header">
      <div id="title">
        <div id="BigHeadline">
          <div id="Words-cn">
            <p>南沙区产业地图</p>
            <p id="Year">(2024)</p>
          </div>
        </div>

        <div id="Words-English">
          <p>NANSHA&emsp;&ensp;INDUSTRIAL&emsp;&ensp;MAP</p>
        </div>
        <div id="backHome" @click="backHome()">
          <div><p>返回首页</p></div>
        </div>
      </div>

      <div id="content-top">
        <div id="top1">
          <div id="map-select">
            <div @click="selectMap1()">
              <div
                class="select-item01-close"
              >
                行业门类地图
              </div>
              <div
                class="line1-close"
              ></div>
            </div>
            <div id="select-item02" @click="selectMap2()">
              <div
                class="select-item02"
              >
                产业园区地图
              </div>
              <div
                class="line2"              
              ></div>
            </div>
          </div>

          <div id="search-box">
            <input
              type="text"
              class="search-input"
              v-model="inputName"
              :style="searchBtnSty"
              @keyup.enter="findBlock()"
              placeholder="&emsp;请输入园区名称"
            />
            <div @click="toggleSearch()" id="searchBtn" class="searchBtn"></div>
          </div>
        </div>

      </div>
    </div>
    <div id="content">

      <!-- 产业园区信息 -->
      <div class="content-left-ContentPage">
        <div class="LeftTitle">

          <h>>| {{ BlockAttributes.区块名 }}</h><br>

          <h1 @click="showIntroduction2">>| 园区介绍</h1>
          <div :class="introductionShow ? 'introduction-box' : 'introduction-box introduction-box-hidden' ">
            <p>
              现已入驻： {{ data1[blockID]["现状入驻企业"] }}
            </p>
            <p>
              未供用地：{{data1[blockID]["未供用地数量"]}} 个，面积约为：{{ data1[blockID]["未供用地面积(m²)"] }} m²
            </p>
          </div>  

          <h1 @click="showParcel">>| 地块信息</h1>
          <div :class="parcelShow ? 'Parcel-box' : 'Parcel-box Parcel-box-hidden' ">
            <table>
                <thead>
                    <tr>
                        <th>属性</th>
                        <th>值</th>
                    </tr>
                </thead>
                <tbody>
                    <!-- 以下是表格内容，这里只是示例，你可以根据需要添加更多的行 -->
                    <tr>
                        <td>用地现状代码</td>
                        <td>{{ BlockAttributes.YDXZDM }}</td>
                    </tr>
                    <tr>
                        <td>编号</td>
                        <td>{{ BlockAttributes.编号 }}</td>
                    </tr>
                    <tr>
                        <td>建设类型</td>
                        <td>{{ BlockAttributes.建设类 }}</td>
                    </tr>
                    <tr>
                        <td>用地大类</td>
                        <td>{{ BlockAttributes.用地大 }}</td>
                    </tr>
                    <tr>
                        <td>纳入计划</td>
                        <td>{{ BlockAttributes.纳入计 }}</td>
                    </tr>
                    <tr>
                        <td>已批面积（m²）</td>
                        <td>{{ BlockAttributes.已批面 }}</td>
                    </tr>
                    <tr>
                        <td>备注</td>
                        <td>{{ BlockAttributes.备注 }}</td>
                    </tr>

                    <!-- 根据需要继续添加行 -->
                </tbody>
            </table>            
          </div>  

          <h1 @click="showImg" style="margin-top: 0em;">>| 地块全景图</h1>
          <iframe :class="imgShow ? 'blockImg' : 'blockImg blockImg-hidden' "
          :src="blockImgUrl" alt="描述文本">  </iframe>

        </div>        
      </div>

      <button @click="closeImg" :class="imgShow ? 'iframe-close-btn' : 'iframe-close-btn-hidden' "> 退出 </button>

      <!-- 产业区块地图 -->
      <div id="map3">
      </div>

    </div>
  </body>
</template>

<script>
/*eslint-disable*/

import { getCurrentInstance, onMounted, ref } from "vue";
import JSdata from "../json/产业链-导航.json";
import JSdata1 from "../json/区块信息.json";
import JSdata2 from "../json/产业区块-导航1.json";
import JSdata3 from "../json/产业区块-导航2.json";
import Imgurl from "@/json/底图url.json";
import pubsub from "pubsub-js";

import * as esri from "esri-leaflet";
import "leaflet/dist/leaflet.css";
import L from "leaflet";
import "@supermap/iclient-leaflet";
import axios from "axios";

import { useRoute } from "vue-router";
import { useRouter } from "vue-router";


export default {
  data() {
    return {
      subList: [],
      data: JSdata,
      data1: JSdata1,
      data2: JSdata2,
      data3: JSdata3,
      searchBtnSty: {
        visibility: "hidden",
        width: "0%",
        left: "80%",
        position: "relative",
      },
      introductionShow: true,
      policyShow: {
        visibility: "visible",
        height: "18em",
      },
      titleID: 0,
      childrenID: 0,
      map1_Used: true,
      map2_Used: false,
      mapID: 1,
      selectBoxShow: false,
      inputName: "",
      blockID: 0,
      blockName: "",
      parcelShow: false,
      imgShow: false,
      blockImgUrl: "https://www.720yun.com/t/22vk6ed9Oi9?scene_id=99818995",
      BlockAttributes: {},
    };
  },
  methods: {
    toggleSearch() {
      if (this.searchBtnSty.visibility === "visible") {
        this.searchBtnSty.visibility = "hidden";
        this.searchBtnSty.width = "0%";
        this.searchBtnSty.left = "80%";
      } else {
        this.searchBtnSty.visibility = "visible";
        this.searchBtnSty.width = "73%";
        this.searchBtnSty.left = "13%";
      }
    },

    showIntroduction2() {
      this.introductionShow = !this.introductionShow;
      this.parcelShow = false;
      this.imgShow = false;
    },    

    showParcel(){ 
      this.parcelShow = !this.parcelShow;
      // this.introductionShow = false;
    },
    showImg(){
      this.imgShow = !this.imgShow;
      this.introductionShow = false;
    },
    closeImg(){
      this.imgShow = false;
    }


  },
  setup() {
    const { proxy } = getCurrentInstance();
    const route = useRoute();
    const router = useRouter();

    let map3;
    // 图层列表
    let layerList = [];
    // 轮播标识下标
    let i = 0;
    // 地图面要素列表
    let PolygoList = [];

    onMounted(() => {
      proxy.blockID = route.query.blockID;

      //根据 blockID 得到 blockName
      proxy.blockName = proxy.data1[proxy.blockID].区块名;
      proxy.blockImgUrl = proxy.data1[proxy.blockID].全景图url;
      // 初始化地图对象

      initMap();

      setTimeout(function(){
        map3.setView([Number(proxy.data1[proxy.blockID].Y), Number(proxy.data1[proxy.blockID].X) ], 5);
      }, 500); //单位是毫秒
     
      //切换中心点 高亮显示 目标园区
      proxy.BlockAttributes.区块名 = proxy.blockName;

      changeBlock(proxy.blockName);

    });

    // 初始化地图
    function initMap() {
      // 准备gz2000坐标系参数
      const scaleDenominators = [
        4622333.68, 2311166.84, 1155583.42, 577791.71, 288895.85, 144447.93,
        72223.96, 36111.98, 18055.99, 9028.0, 4514.0, 2257.0, 1128.5, 564.25,
      ];

      const bounds = {
        top: 318728.1875,
        left: 6225.9501953125,
        bottom: 165313.25,
        leftBottom: {
          x: 6225.9501953125,
          y: 165313.25,
        },
        right: 118680.125,
        rightTop: {
          x: 118680.125,
          y: 318728.1875,
        },
      };

      // 构建gz2000坐标系
      const mapcrs = L.CRS.NonEarthCRS({
        bounds: L.bounds(
          [bounds.left, bounds.bottom],
          [bounds.right, bounds.top]
        ),
        resolutions: [
          264.5838625010584, 132.2919312505292, 52.91677250021167,
          26.458386250105836, 13.229193125052918, 6.614596562526459,
          2.6458386250105836, 0.5291677250021167, 0.13229193125052918,
        ],
        origin: L.point(-5623200.0, 10002100),
        scaleDenominators: scaleDenominators,
      });

      // 在gz2000坐标系上创建地图
      map3 = L.map("map3", {
        center: [182495.579, 66784.853],
        crs: mapcrs,
        preferCanvas: true,
        maxZoom: 8,
        minZoom: 3,
        zoom:5,
        zoomControl: false, // 隐藏缩放控件
        attributionControl: false, // 隐藏信息控件
        logoControl: false, // 隐藏logo图标
        closePopupOnClick: false,
      });

      // 加载底图
      esri
        .tiledMapLayer({
          url: Imgurl[0].url,              
          useCors: false,
        })
        .addTo(map3);
      //未供用地
      esri
        .tiledMapLayer({  
          url: Imgurl[3].url,      
          useCors: false,
        })
        .addTo(map3);
      // 区块
      esri
        .tiledMapLayer({  
          url: Imgurl[2].url,     
          useCors: false,
        })
        .addTo(map3);
    }

    //
    function changeBlock(blockName) {

      // // 去除旧面要素 失败
      // PolygoList.forEach(function(feature) {
      //   map3.removeLayer(feature);
      // });      

      console.log(blockName)
       axios({
        method: "get",
        url: Imgurl[3].url+"/0/query",
        params: {
          where:  "区块名= '"+blockName + "'",
          outFields: "*",
          f: "pjson",
          returnIdsOnly: false,
          returnCountOnly: false,
        },
      }).then((res) => {
        console.log(res.data);      
        // 绘制
        for (let index = 0; index < res.data.features.length; index++) {
          // 绘制区块
          PolygoList.push(
            addPolygon(res.data.features[index],"rgb(76,230,0)", 1, 2, "rgba(76,230,0,0.5)")
          );
        }
      if (PolygoList.length != 0) {
        PolygoList.forEach((element) => {
          element.addTo(map3);
        });
      }});
    }
  

    // 添加面要素
    function addPolygon(element, color, opacity, border, fillColor = color ) {
      let layer;

      let attributes = element.attributes;

      element.geometry.rings.forEach((ring) => {
        // 坐标微调
        let rings = [];
        ring.forEach((point) => {
          rings.push([point[1], point[0]]);
        });


        // 绘制面要素
        layer = L.polygon(rings, {
          color: color,
          fillOpacity: opacity ? opacity : 1,
          weight: border ? border : 0,
          opacity: 1,
          fillColor: fillColor,
        });

        //添加点击事件 修改颜色 展示属性表         
        layer.on('click', function(e) {
            // 遍历所有的多边形
            for (var j = 0; j < PolygoList.length; j++) {
                // 将其他多边形的颜色恢复
                PolygoList[j].setStyle({
                    color: "rgb(76,230,0)",
                    fillColor: "rgba(76,230,0,0.5)"
                });
            }
            // 改变被点击的多边形颜色为红色
             e.target.setStyle({
                color: "rgba(255,0,0,1)",
                fillColor: 'rgba(255,0,0,0.8)'
            });
            // 属性表展示
            proxy.BlockAttributes = attributes;
            proxy.parcelShow = true;
            getCenterPoint(rings);
        });



      });
      return layer;
    }

    //获取中心点 并平移至目标点
    function getCenterPoint(rings) {
      let x_min = 9999999999;
      let x_max = 0;
      let y_min = 9999999999;
      let y_max = 0;
      
      for (let i = 0;i<rings.length;i++ ){
        if( rings[i][1] < x_min  ) x_min =rings[i][1];
        if( rings[i][1] > x_max  ) x_max =rings[i][1];
        if( rings[i][0] < y_min  ) y_min =rings[i][0];
        if( rings[i][0] > y_max  ) y_max =rings[i][0];
      }

      map3.setView([(y_min+y_max)/2 , (x_min+x_max)/2 ]);
      return [(y_min+y_max)/2 , (x_min+x_max)/2 ] 
    }

    //查找区块
    function findBlock() {
      console.log('----------------');
      
      // console.log(proxy.inputName);
      let substring = proxy.inputName;
      proxy.inputName = "";
      for(let i = 0; i<proxy.data1.length; i++){
        let str = proxy.data1[i].区块名;  
        if (new RegExp(substring).test(str)) {
          console.log(`"${str}" 包含子字符串 "${substring}"`);

          proxy.blockID = i;
          proxy.blockName = proxy.data1[i].区块名;
          proxy.blockImgUrl = proxy.data1[proxy.blockID].全景图url;

          proxy.BlockAttributes = { "区块名": proxy.blockName }

          changeBlock(proxy.data1[i].区块名);
          map3.setView([Number(proxy.data1[i].Y), Number(proxy.data1[i].X) ], 5);
          break;
        }      
      }     
    }

    //跳转回 page1
    function backHome() {
      router.push({
      path:"/",
      query:{ },
      });
    }

    //切换回page1 
    function selectMap1() {
      router.push({
      path:"/",
      query:{ },
      });
    }  
    //切换回page2 
    function selectMap2() {
      console.log("返回page2");
      router.push({
      path:"/page2",
      query:{ },
      });
    }  

    return { backHome, findBlock, selectMap1, selectMap2 };
  },

};
</script>